{extend name="app/admin/view/table.html"}

{block name="content"}
<div class="layui-card">
  <div class="layui-card-header">{$title}</div>
  <div class="layui-card-body">
    <form class="layui-form" lay-filter="report-form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">统计时间</label>
          <div class="layui-input-inline">
            <input type="text" name="start" class="layui-input" id="start" value="{$start}">
          </div>
          <div class="layui-form-mid">至</div>
          <div class="layui-input-inline">
            <input type="text" name="end" class="layui-input" id="end" value="{$end}">
          </div>
          <button class="layui-btn" lay-submit lay-filter="search">查询</button>
        </div>
      </div>
    </form>

    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">库存统计</div>
          <div class="layui-card-body">
            <table class="layui-table">
              <colgroup>
                <col width="150">
                <col width="200">
                <col>
              </colgroup>
              <thead>
                <tr>
                  <th>统计项</th>
                  <th>数量</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>总入库量</td>
                  <td>{$inTotal}</td>
                </tr>
                <tr>
                  <td>总出库量</td>
                  <td>{$outTotal}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">库存分布</div>
          <div class="layui-card-body">
            <div id="chart" style="height: 300px;"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="layui-row">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">商品库存明细</div>
          <div class="layui-card-body">
            <table class="layui-table">
              <colgroup>
                <col width="150">
                <col width="100">
                <col width="100">
                <col width="100">
                <col>
              </colgroup>
              <thead>
                <tr>
                  <th>商品名称</th>
                  <th>总库存</th>
                  <th>已用库存</th>
                  <th>剩余库存</th>
                </tr>
              </thead>
              <tbody>
                {volist name="goods" id="good"}
                <tr>
                  <td>{$good.name}</td>
                  <td>{$good.total}</td>
                  <td>{$good.used}</td>
                  <td>{$good.remaining}</td>
                </tr>
                {/volist}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
layui.use(['form', 'laydate', 'echarts'], function(){
  var form = layui.form;
  var laydate = layui.laydate;
  var echarts = layui.echarts;

  // 初始化日期选择
  laydate.render({
    elem: '#start'
  });
  laydate.render({
    elem: '#end'
  });

  // 初始化图表
  var chart = echarts.init(document.getElementById('chart'));
  chart.setOption({
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '库存分布',
        type: 'pie',
        radius: '50%',
        data: [
          {value: {$inTotal}, name: '总入库量'},
          {value: {$outTotal}, name: '总出库量'}
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  });
});
</script>
{/block}
